<template>
    <!--文字链接-->
    <h1>文字链接</h1>
      <el-link href="https://element-plus.org" target="_blank">default</el-link>
      <el-link type="primary">primary</el-link>
      <el-link type="success">success</el-link>
      <el-link type="warning">warning</el-link>
      <el-link type="danger">danger</el-link>
      <el-link type="info">info</el-link>

    <h1>文字链接禁用</h1>
    <el-link disabled>default</el-link>
    <el-link type="primary" disabled>primary</el-link>
    <el-link type="success" disabled>success</el-link>
    <el-link type="warning" disabled>warning</el-link>
    <el-link type="danger" disabled>danger</el-link>
    <el-link type="info" disabled>info</el-link>

    <h1>文字链接下划线</h1>
    <el-link :underline="false">没有下划线</el-link>
    <el-link>有下划线</el-link>

    <h1>图标链接</h1>
    <el-link :icon="Edit">Edit</el-link>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>

<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>